import React from 'react'
import { useState, useEffect } from 'react'
import style from '../styles/lx.module.css'
import { ArrowLeft } from '@react-vant/icons';
import { useNavigate } from 'react-router-dom';
import { Button } from 'react-vant';
import axios from 'axios';
axios.defaults.baseURL = 'http://localhost:3000';
export default function List1() {
    let navigate = useNavigate();
    let [list, setList] = useState([]);
    let [a, setA] = useState({});
    useEffect(() => {
        getpaylist()
    }, [])
    //获取缴费记录
    let getpaylist = async () => {
        let { data: { code, data, data1 } } = await axios.get('/lx/paylist')
        if (code === 200) {
            setList(data)
            setA(data1)
        }
    }
    return (
        <div className={style.html2}>
            <div className={style.nav1}>
                <ArrowLeft onClick={() => navigate(-1)}></ArrowLeft>
                <span style={{ marginLeft: "3.2rem" }}>物业费</span>
            </div>
            {
                list.map(item => (
                    <div className={`${style.nav2} ${style.content}`} key={item._id}>
                        <p style={{ marginLeft: '.2rem' }}>待缴金额</p>
                        <p style={{ fontSize: '.6rem', marginTop: ".4rem", marginLeft: '.2rem' }}>{item.payable}.00</p>
                        <hr style={{ marginLeft: '.2rem', width: "95%", height: '.04rem', backgroundColor: 'rgb(247, 246, 246)' }} />
                        <p style={{ marginLeft: '.2rem', fontSize: ".28rem", marginTop: '.4rem', color: 'gray' }}>{a.name}{item.rommid.name}</p>
                        <div className={`${style.nav3} ${style.content}`}>
                            <Button type='default' style={{ width: '2.4rem', backgroundColor: '#E6F1FF', color: '#006EFF' }} onClick={() => navigate('/list3')}>缴费记录</Button>
                            <Button type='primary' style={{ width: '2.4rem' }} onClick={() => navigate(`/list2?all=${encodeURIComponent(JSON.stringify(item))}`)}>缴费</Button>
                        </div>
                    </div>
                ))
            }

        </div >
    )
}
